<template>
  <div class="captchaAccount">
    <div v-if="isSlidingBlock" id="captcha-account"></div>
    <el-dialog title="安全提示" :visible.sync="centerDialogVisible" width="500px" center>
      <span> 当前页面操作频繁或存在登录风险，请稍候再试或重新打开浏览器重试</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "captchaAccount",
  data() {
    return {
      centerDialogVisible: false,
      isButton: true, // 二次验证滑块显示为false  滑块滑动完成为true
      isSlidingBlock: false
    };
  },
  methods: {
    // 完成滑块
    complete() {
      this.isSlidingBlock = false;
      this.isButton = true;
    },
    submit() {
      if (!this.isButton) {
        this.$message({ message: "请滑动完成验证码", type: "warning" });
        return false;
      }
      return true;
    },
    verify({ data, slide }, callback, fail) {
      if (data.status == 200) {
        //无痕验证通过
        // 无痕验证通过执行
        callback();
      } else if ((data.data.statusVal == "200" || data.data.statusVal == "100") && data.status != 200) {
        this.$message({ message: data.message, type: "warning" });
      } else if (data.data.statusVal == "800" || data.data.statusVal == "900") {
        this.centerDialogVisible = true;
        // 无痕验证失败，直接拦截
      } else if (data.data.statusVal == "400") {
        // 无痕验证失败，触发二次验证
        this.isButton = false;
        // 无痕验证失败，触发二次验证
        // 二次验证码（滑动验证码）配置项设置，详情请见滑动验证集成方式文档
        // 二次验证的appkey，scene，test值及success，fail，error的回调由nvc初始化时决定，请不要在二次验证时传入
        this.isSlidingBlock = true;
        this.$nextTick(() => {
          var ncoption = {
            //无痕配置 && 滑动验证、刮刮卡、问答验证码通用配置
            // 在二次验证中，请不要配置初始化参数appkey，scene，test的值
            // 声明滑动验证需要渲染的目标ID。
            renderTo: "#captcha-account",
            upLang: {
              cn: {
                //加载状态提示。
                LOADING: "加载中...",
                //等待滑动状态提示。
                SLIDE: "请向右滑动完成" + (slide || "登录"),
                //验证通过状态提示。
                SUCCESS: "验证通过",
                //验证失败触发拦截状态提示。
                ERROR: "非常抱歉，网络出错了...",
                //验证失败触发拦截状态提示。
                FAIL: "验证失败，请重试"
              }
            }
          };
          // 唤醒二次验证（滑动验证码）
          window.nvc.getNC(ncoption);
          // 滑块高度不够
          var nc_scale = document.querySelector("#nc_1_n1z");
          // nc_scale.style = 'height:34px';
        });
        fail();
      } else {
        this.$message({ message: data.message, type: "warning" });
      }
    }
  }
};
</script>
<style lang="less">
.captchaAccount {
  .sm-pop-inner {
    position: relative !important;
    .nc_iconfont{
      height: 34px;
    }
  }
}
</style>
